<template>
  <el-card class="box-card main-keys" shadow="never">
    <div slot="header" class="clearfix">
      <div>
        <span class="title" style="font-size:18px">交易数据</span>
        <span
          class="update-time"
        >统计时间：{{
          parseTime(dataInfo.startTimeStr, "{y}-{m}-{d}") +
            " - " +
            parseTime(dataInfo.endTimeStr, "{y}-{m}-{d}")
        }}</span>
      </div>
    </div>
    <el-row :gutter="15" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">预计收入（元）</div>
            <count-to
              :start-val="0"
              :end-val="numberFilter(dataInfo.estimateIncome)"
              :duration="1000"
              class="card-panel-num"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import CountTo from 'vue-count-to'
import { parseTime } from '@/utils'
export default {
  components: {
    CountTo
  },
  props: {
    dataInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    parseTime,
    numberFilter(v) {
      if (!v) {
        return 0
      } else {
        return Number(v)
      }
    }
  }
}
</script>
<style lang="scss">
.main-keys {
  margin-bottom: 25px;
  &.el-card {
    padding-bottom: 30px;
    border: 0 none;
  }
  .el-card__header {
    position: relative;
  }
  .el-card__body {
    padding: 0;
  }
  .data-time {
    .el-radio-button--medium .el-radio-button__inner {
      padding: 8px 30px;
    }
  }
}
</style>
<style lang="scss" scoped>
.main-keys {
  .update-time {
    margin-left: 14px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .data-time {
    position: absolute;
    right: 30px;
    top: 0;
  }
}
.panel-group {
  display: flex;
  align-items: center;
  background-color: #fff;
  .card-panel-col {
    // cursor: pointer;
    height: 136px;
    padding-top: 44px;
    // &:hover {
    //   // background-color: #efefef;
    //   .card-panel-num{
    //     color:#ED145B;
    //   }
    // }
  }
  .card-panel {
    height: 100%;
    font-size: 12px;
    text-align: center;
    color: #333;
    .card-panel-description {
      .card-panel-text {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 20px;
      }
      .card-panel-num {
        font-size: 40px;
        line-height: 30px;
        font-family: XLFQ-Regular, XLFQ;
        font-weight: 400;
        color: #df232f;
      }
    }
  }
}
</style>
